<!-- eslint-disable @typescript-eslint/no-unused-vars -->
<!-- eslint-disable prettier/prettier -->
<template>
  <div>
    <div class="card content-box">
      <span class="text">点位编码管理</span>
      <el-divider></el-divider>
      <!--搜索-->
      <!--      <div class="mt-4">-->
      <!--        <el-input v-model="input" style="max-width: 600px" placeholder="搜索" class="input-with-select">-->
      <!--          <template #append>-->
      <!--            <el-button :icon="Search" />-->
      <!--          </template>-->
      <!--        </el-input>-->
      <!--      </div>-->
      <br />
      <!--<el-button type="primary" @click="add_nfc = true" style="margin-left: 82%">添加nfc</el-button>-->
      <!--展示列表-->
      <el-table :data="tableData" border class="custom-table" style="width: 100%">
        <el-table-column type="selection" :selectable="selected" width="55" />
        <el-table-column label="序号" fixed width="100" type="index"> </el-table-column>
        <el-table-column label="编码名称" prop="nfcName"></el-table-column>
        <el-table-column label="编码信息" prop="nfcMsg"></el-table-column>
        <el-table-column label="操作" width="200">
          <!--#default="{ row }"-->
          <template #default="{ row }">
            <!--            <el-button type="primary" @click="show_nfc = true" :icon="Search" circle></el-button>-->
            <el-button type="primary" @click="show_edit(row)" size="small">编辑</el-button>
            <el-button type="danger" @click="delNfc(row)" size="small">删除</el-button>
          </template>
        </el-table-column>
        <template #empty>
          <el-empty description="空空如也" />
        </template>
      </el-table>
      <br />
      <!--分页 后面要根据数据算-->
      <div style="width: 100%; display: flex; justify-content: end">
      <el-pagination
        :current-page="searchData.current"
        :page-size="searchData.limit"
        :total="total"
        :pager-count="7"
        layout="jumper, prev, pager, next, total"
        @current-change="getData"
      /></div>
    </div>

    <!--nfc详情抽屉-->

    <!--    <el-drawer v-model="show_nfc" size="30%">-->
    <!--      <div>-->
    <!--        &lt;!&ndash;nfc信息&ndash;&gt;-->
    <!--        <el-card style="max-width: 100%">-->
    <!--          <template #header>{{ nfc.nfcName }}</template>-->
    <!--          <div class="common-layout">-->
    <!--            <el-container>-->
    <!--              <el-main>-->
    <!--                <el-descriptions title="" :column="3" border>-->
    <!--                  <el-descriptions-item label="nfc名称" label-align="center" align="center">-->
    <!--                    {{ nfc.nfcName }}-->
    <!--                  </el-descriptions-item>-->
    <!--                  <el-descriptions-item label="nfc信息" label-align="center" align="center">-->
    <!--                    {{ nfc.nfcMsg }}-->
    <!--                  </el-descriptions-item>-->
    <!--                </el-descriptions>-->
    <!--              </el-main>-->
    <!--            </el-container>-->
    <!--          </div>-->
    <!--        </el-card>-->
    <!--      </div>-->

    <!--      <div></div>-->
    <!--    </el-drawer>-->

    <!--nfc修改抽屉-->
    <el-drawer v-model="show_groDetail" title="编码信息" :append-to-body="true" size="50%">
      <!-- 修改表单 -->
      <el-form :model="nfcForm" label-width="100px">
        <el-form-item label="编码名称">
          <el-input v-model="nfcForm.nfcName" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item style="text-align: center">
          <el-button type="primary" @click="editClick">修改</el-button>
          <el-button type="info" @click="show_groDetail = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <!--对话框，确定用-->
    <el-dialog v-model="isSure" title="Warning" width="500" align-center>
      <span>{{ sureContext }}</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="isSure = false">取消</el-button>
          <el-button type="primary"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="js">
import { reactive, ref, onMounted } from "vue";
//import { Delete, Edit } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import request from "@/api/request.js";

//控制变量
const show_groDetail = ref(false);
// const show_nfc = ref(false);
const isSure = ref(false);
const sureContext = ref("");

//用户搜索输入
// const input = ref("");

//数据模型
//机构
const nfcs = ref([]);

//class不允许做变量名，用nfc代替
const nfc = ref({
  nfcName: "nfc1",
  nfcMsg: "nfc描述信息"
});

const nfcForm = ref({
  nfcName: "",
  nfcMsg: ""
});

//分页
const total = ref(nfcs.value.length);
// searchData-向后端分页查询的对象，即当前页和每页总数
const searchData = reactive({
  current: 1,
  limit: 10
});

const tableData = ref([{}]);

//传入分页参数
const pageQuery = (current, limit) => {
  let begin = current * limit - limit;
  //这里不减一是因为，slice方法裁切是左闭右开数组
  let end = current * limit;
  tableData.value = nfcs.value.slice(begin, end);
};

const getData = newPage => {
  searchData.current = newPage;
  total.value = nfcs.value.length;
  pageQuery(searchData.current, searchData.limit);
};

const getNfcList = () => {
  request.get("/api-self/NFC").then(res => {
    const data = res.data;
    if (data.code === 0) {
      nfcs.value = data.data;
      total.value = nfcs.value.length;
      tableData.value = nfcs.value;
    } else {
      ElMessage.error("获取NFC列表失败：" + data.message);
    }
  });
};
onMounted(() => {
  getNfcList();
  pageQuery(searchData.current, searchData.limit);
});

const show_edit = row => {
  nfc.value.nfcMsg = row.nfcMsg;
  nfc.value.nfcName = row.nfcName;
  nfcForm.value.nfcName = row.nfcName;
  nfcForm.value.nfcMsg = row.nfcMsg;
  show_groDetail.value = true;
};

const editClick = async () => {
  request.put("/api-self/NFC", nfcForm.value).then(res => {
    const data = res.data;
    if (data.code === 0) {
      show_groDetail.value = false;
      ElMessage.success("修改成功");
      getNfcList();
      pageQuery(searchData.current, searchData.limit);
    } else {
      ElMessage.error("修改失败：" + data.message);
    }
  });
};

const delNfc = async row => {
  ElMessageBox.confirm("将会删除这个NFC，确定吗？", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    request.delete("/api-self/NFC/" + row.nfcMsg, nfcForm.value).then(res => {
      const data = res.data;
      if (data.code === 0) {
        ElMessage.success(row.nfcName + "删除成功");
        getNfcList();
        pageQuery(searchData.current, searchData.limit);
      } else {
        ElMessage.error("修改失败：" + data.message);
      }
    });
  });
};

const selected = () => {
  return true;
};
</script>

<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  font-size: 32px;
  font-weight: 600;
  color: #6b778c;
}
.demo-tabs {
  margin-top: -20px;
}
.topadd {
  position: absolute;
  top: 73px;
  right: 40px;
}
.page-container {
  box-sizing: border-box;
  min-height: 100%;
}
.add {
  position: absolute;
  top: 80%;
  right: 3%;
  float: left;
  width: 60px;
  height: 60px;
  font-size: 50px;
  font-weight: 600;
  border-radius: 50%;
}
.inneradd {
  position: absolute;
  top: 55px;
  right: 30px;
  float: left;
  font-weight: 900;
}
.avatar-uploader .avatar {
  display: block;
  width: 178px;
  height: 178px;
}
.avatar-uploader .el-upload {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
  width: 178px;
  height: 178px;
  font-size: 28px;
  color: #060707;
  text-align: center;
}
:deep(.my-label) {
  background: var(--el-color-success-light-9) !important;
}
:deep(.my-content) {
  background: var(--el-color-danger-light-9);
}
.Product-image {
  width: auto; /* 图片宽度自适应 */
  max-width: 100%; /* 图片最大宽度为其容器的100% */
  height: auto; /* 图片高度自适应 */
  max-height: 100%; /* 图片最大高度为其容器的100% */
}
.custom-table :deep(.el-table__header-wrapper thead tr th) {
  color: #000000;
  text-align: center;
  background-color: #fafafa;
}
.custom-table :deep(.el-table__body-wrapper tbody tr td) {
  text-align: center; /* 单元格内容居中 */
}
</style>
